<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* 使body占满整个视口高度 */
        }

        header {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
        }

        h2 {
            text-align: center;
            color: #35424a; /* 标题颜色 */
            margin-top: 20px;
        }

        .login-container {
            width: 300px; /* 设置容器宽度 */
            margin: 50px auto; /* 垂直居中 */
            padding: 20px;
            background: #ffffff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        label {
            display: block; /* 每个标签占一行 */
            margin-bottom: 5px;
            color: #333; /* 标签颜色 */
        }

        input[type="text"], input[type="password"] {
            width: 100%; /* 输入框宽度100% */
            padding: 10px;
            margin-bottom: 20px; /* 添加底部间距 */
            border: 1px solid #ddd;
            border-radius: 3px; /* 圆角效果 */
            transition: border-color 0.3s; /* 平滑过渡效果 */
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #35424a; /* 焦点时的边框颜色 */
            outline: none; /* 去掉默认的轮廓 */
        }

        button {
            width: 100%; /* 按钮宽度100% */
            padding: 10px;
            background-color: #3f4c5a;
            border: none;
            border-radius: 3px; /* 圆角效果 */
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s; /* 平滑过渡效果 */
        }

        button:hover {
            background-color: #414b58; /* hover 状态颜色 */
        }

        .register-link {
            text-align: center;
            margin-top: 15px;
        }

        .register-link button {
            background-color: #3f4c5a; /* 注册按钮的新背景颜色 */
            border: none;
            color: #ffffff;
            padding: 10px;
            border-radius: 3px; /* 圆角效果 */
            cursor: pointer;
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .register-link button:hover {
            background-color: #414b58; /* 注册按钮的 hover 背景颜色 */
        }

        .register-link a {
            color: #ffffff; /* 链接颜色 */
            text-decoration: none; /* 去掉下划线 */
        }

        footer {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
            margin-top: auto; /* 将footer推到页面底部 */
        }

    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的博客</h1>
</header>

<div class="login-container">
    <h2>登录</h2>
    <form method="post">
        {% csrf_token %}
        <label for="username">用户名:</label>
        <input type="text" name="username" required>

        <label for="password">密码:</label>
        <input type="password" name="password" required>

        <button type="submit">登 录</button>
    </form>
    <div class="register-link">
        <button>
            <a href="/register/">注 册</a>
        </button>
    </div>

    {% if error_message %}
        <p style="color: red; text-align: center;">{{ error_message }}</p>
    {% endif %}
</div>

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>
</body>
</html>
